import axios from '../utils/http';

//获取元素
let bookList = document.querySelector('.bookList');
let pagination = document.querySelector('.pagination');

//声明一个全局变量
let config = {
    //当前页码
    page: 1, 
    //总页码数
    totalPage: 1,
    //关键字
    keyword: ''
};

//为 config 添加一个 books 属性, 当修改 books 属性的时候, 更新书籍列表
// setter   config.books = []
Object.defineProperty(config, 'books', {
    //当修改 config.books 属性时, 执行 set 方法
    set(v){
        //更新书籍列表
        handleBooks(v);
    }
})

Object.defineProperty(config, 'totalPage', {
    //当修改 config.totalPage 属性时, 执行 set 方法
    //config.totalPage = 5;
    set(v){
        handlePages(v);
    }
})

/**
 * 展示图书数据
 * @param {*} data   书籍数组
 */
 function handleBooks(data){
    //清空数据
    bookList.innerHTML = '';
    //渲染数据 创建元素 插入到文档中
    data.forEach(item => {
        //创建元素
        let div = document.createElement('div');
        //设置 div 的class
        div.className = 'col-sm-6 col-md-4 col-lg-2';
        //创建图片 div
        let imgDiv = document.createElement('div');
        //设置 class
        imgDiv.className = 'thumbnail';
        //创建 img
        let img = document.createElement('img');
        //设置图片的 src   http://127.0.0.1/douban/s34201275.jpg
        img.src = 'http://127.0.0.1' + item.img; // 图片是保存在 80 端端口服务下的
        //创建 h5 元素
        let h5 = document.createElement('h5');
        //设置 h5 的文本
        h5.innerHTML = item.name;
        //组装结构
        imgDiv.appendChild(img);
        imgDiv.appendChild(h5);
        div.appendChild(imgDiv);
        // //插入容器中
        bookList.appendChild(div);
    });
}

/**
 * 创建页码结构
 */
function handlePages(totalPage){
    //清空旧的页码
    pagination.innerHTML = '';

    //处理分页页码展示
    //2-1 处理上一页
    {
        let li = document.createElement('li');
        let a = document.createElement('a');
        let span = document.createElement('span');
        //设置文本
        span.innerHTML = '&laquo;'
        //拼装
        a.appendChild(span);
        li.appendChild(a);
        //插入
        pagination.appendChild(li);
        //绑定事件
        li.onclick =  async function(e){
            //判断当前的页码
            //如果页码小于 1 则使用 1
            if(config.page <= 1) return false;
            //如果大于 1 则页码减一
            else config.page -= 1
            await axios.get('/api/book', {
                params: {
                    page: config.page,
                    keyword: config.keyword 
                }
            });
        }
    }
    //2-2 页码部分
    for(let i=1;i<=totalPage; i++){
        let li = document.createElement('li');
        //比较  添加高亮效果
        if(Number(i) === Number(config.page)){
            li.className = 'active';
        }
        let a = document.createElement('a');
        let span = document.createElement('span');
        span.innerHTML = i;
        //拼装
        a.appendChild(span);
        li.appendChild(a);
        //插入
        pagination.appendChild(li);
        //为 li 绑定事件
        li.onclick = async function(){
            //设置页码数
            config.page = i;
            //发送 AJAX 请求
            await axios.get('/api/book', {
                params: {
                    page: i,
                    keyword: config.keyword
                }
            });
            
        }
    }

    //2-3 下一页的处理
    {
        let li = document.createElement('li');
        let a = document.createElement('a');
        let span = document.createElement('span');
        //设置文本
        span.innerHTML = '&raquo;'
        //拼装
        a.appendChild(span);
        li.appendChild(a);
        //插入
        pagination.appendChild(li);
        //
        li.onclick = async function(){
            //判断当前的页码是否大于等于的最大页码
            if(config.page >= config.totalPage) return false;
            config.page = Number(config.page) + 1;
            //发送请求
            await axios.get('/api/book', {
                params: {
                    page: config.page,
                    keyword: config.keyword 
                }
            });
        }
    }
}

//暴露
export default config;